<template>
  <div>
    <a-card :bordered="false" style="margin-bottom: 20px">
      <a-page-header
        style="border: 0px solid rgb(235, 237, 240)"
        title=""
        :breadcrumb="{ props: { routes } }"
        sub-title=""
      />
    </a-card>
    <div style="margin: 20px">
      <a-card
        :bordered="false"
        :title="$t('upload')"
        :headStyle="{ 'font-weight': '600' }"
      >
        <div>
          <a-row>
            <a-col :span="5">
              上传demo1：
              <a-upload
                name="file"
                accept="image/*"
                :showUploadList="false"
                :customRequest="customRequestP"
              >
                <a-button v-show="!showLoadingP" type="primary">
                  <a-icon type="plus" /> 上传图片
                  <a-icon
                    v-show="imgUrl"
                    type="check-circle"
                    theme="twoTone"
                    two-tone-color="#52c41a"
                /></a-button>
                <a-button v-show="showLoadingP" disabled
                  ><a-icon type="loading" /> 上传中...
                </a-button>
              </a-upload>
            </a-col>
            <a-col :span="14">
              上传demo2：
              <Uploadimg />
            </a-col>
            <a-col :span="5">
              上传demo3：
              <Uploadfile />
            </a-col>
          </a-row>
        </div>
      </a-card>
    </div>
    <div style="margin: 20px">
      <a-card
        :bordered="false"
        :title="$t('chart')"
        :headStyle="{ 'font-weight': '600' }"
      >
        <a-row>
          <a-col :span="8">
            <Chart :options="optionline" />
          </a-col>
          <a-col :span="8">
            <Chart :options="optionbar" />
          </a-col>
          <a-col :span="8">
            <Chart :options="optionpie" />
          </a-col>
        </a-row>
      </a-card>
    </div>
  </div>
</template>

<script>
// import Radar from "@/components/";
import Chart from '@/components/Charts/line.vue'
import Uploadimg from '@/components/custom/Uploadimg'
import Uploadfile from '@/components/custom/Uploadfile'
export default {
  name: '',
  components: {
    Uploadimg,
    Uploadfile,
    Chart
    // Radar,
  },
  data () {
    return {
      optionpie: {
        tooltip: {
          trigger: 'item'
        },
        legend: {
          top: '5%',
          left: 'center'
        },
        series: [
          {
            name: 'Access From',
            type: 'pie',
            radius: ['40%', '70%'],
            avoidLabelOverlap: false,
            label: {
              show: false,
              position: 'center'
            },
            emphasis: {
              label: {
                show: true,
                fontSize: '40',
                fontWeight: 'bold'
              }
            },
            labelLine: {
              show: false
            },
            data: [
              { value: 1048, name: 'Search Engine' },
              { value: 735, name: 'Direct' },
              { value: 580, name: 'Email' },
              { value: 484, name: 'Union Ads' },
              { value: 300, name: 'Video Ads' }
            ]
          }
        ]
      },
      optionbar: {
        xAxis: {
          type: 'category',
          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            data: [120, 200, 150, 80, 70, 110, 130],
            type: 'bar'
          }
        ]
      },
      optionline: {
        xAxis: {
          type: 'category',
          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            data: [150, 230, 224, 218, 135, 147, 260],
            type: 'line'
          }
        ]
      },
      routes: [
        {
          path: '',
          breadcrumbName: '首页'
        },
        {
          path: '',
          breadcrumbName: '详情页'
        },
        {
          path: '',
          breadcrumbName: '自定义组件集合'
        }
      ],

      showLoadingP: false,

      imgUrl: false
    }
  },
  methods: {
    customRequestP (file) {
      //   this.showLoadingP = true;
      //  const url = this.$api.updateImg;
      //   const formData = new FormData();
      //   formData.append("file", file.file);
      //   formData.append("type", "homeImg");
      //   const res = await this.$http.post(url, formData);
      //   if (res.code === 200) {
      //     this.showLoadingP = false;
      //     this.imgUrl = true;
      //     this.$notification.success({
      //       message: "上传成功",
      //     });
      //   } else {
      //     this.showLoadingP = false;
      //     this.$notification.error({
      //       message: res.message,
      //     });
      //   }
    }
  }
}
</script>

<style>
.ant-upload-select-picture-card i {
  font-size: 32px;
  color: #999;
}

.ant-upload-select-picture-card .ant-upload-text {
  margin-top: 8px;
  color: #666;
}
</style>
